<template>
    <div class="mg">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
            <el-form-item label="菜单名称">
                <el-input v-model="queryParams.menuName" placeholder="菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="菜单URL">
                <el-input v-model="queryParams.menuUrl" placeholder="菜单URL"></el-input>
            </el-form-item>
            <el-form-item label="权限类型">
                <el-select v-model="queryParams.type" placeholder="权限类型">
                    <el-option :label="item.name" :value="item.code" :key="index" v-for="(item,index) in roleTypeList">{{item.name}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getMenuList">查询</el-button>
                <el-button type="primary" @click="handleEdit('', 'insert')">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="menuInfList" :stripe="true" class="width100">
            <el-table-column label="菜单名称" prop="menuName"></el-table-column>
            <el-table-column label="菜单URL" prop="menuUrl"></el-table-column>
            <el-table-column label="校验权限URL" prop="roleUrl"></el-table-column>
            <el-table-column label="菜单图标" prop="menuIcon"></el-table-column>
            <el-table-column label="权限类型">
                <template slot-scope="scope">
                    <el-tag effect="plain" type="" v-if="scope.row.type == 'menu' && scope.row.parentId == 0">目录
                    </el-tag>
                    <el-tag effect="plain" type="success" v-else-if="scope.row.type == 'menu'">菜单</el-tag>
                    <el-tag effect="plain" type="info" v-else-if="scope.row.type == 'button'">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row, 'edit')">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--    分页    -->
        <div class="text-center">
            <pagination v-show="totalSize>0" :total="totalSize" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getMenuList"/>
        </div>

        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible" @close="closeEdit"
                width="40%">
            <el-form :model="menuInfoFrom" :rules="ruleMenuInfoFrom" ref="menuInfoFrom" size="small" label-width="auto"
                     class="demo-ruleForm">
                <el-form-item label="权限类型" prop="type">
                    <el-radio v-for="(item,index) in roleTypeList" :key="index"
                              :value="item.code" :label="item.code" v-model="menuInfoFrom.type">{{item.name}}
                    </el-radio>
                </el-form-item>
                <el-form-item label="父菜单" prop="parentId">
                    <el-select v-model="menuInfoFrom.parentId" placeholder="请选择父菜单">
                        <el-option label="根目录" value="0" v-if="menuInfoFrom.type == 'dir'"></el-option>
                        <el-option v-for="(item,index) in menuDirInfList" :key="index" v-else
                                   :label="item.menuName" :value="item.menuId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="menuInfoFrom.menuName"></el-input>
                </el-form-item>
                <el-form-item label="菜单URL" prop="menuUrl">
                    <el-input v-model="menuInfoFrom.menuUrl"
                              :disabled="menuInfoFrom.type != 'menu'"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="menuIcon">
                    <el-input v-model="menuInfoFrom.menuIcon"
                              :disabled="menuInfoFrom.type == 'button'"></el-input>
                </el-form-item>
                <el-form-item label="校验权限URL" prop="roleUrl">
                    <el-input v-model="menuInfoFrom.roleUrl" :disabled="menuInfoFrom.type == 'dir'"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
                    <el-button @click="closeEdit">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {getAllMenuList, insertMenu, updateMenu, deleteMenu} from "../../api/menu";
    import Pagination from "../../components/Pagination";

    export default {
        name: "menuList",
        components: {Pagination},
        data() {
            return {
                queryParams: {
                    menuName: "", // 菜单名称
                    menuUrl: "", // 菜单url
                    pageNum: 1, // 当前页
                    pageSize: 10, // 每页显示数量
                    type: "", // 类型 menu:菜单  button:按钮
                }, // 查询条件
                menuInfoFrom: {
                    menuId: "", // 菜单id
                    menuName: "", // 菜单名称
                    menuUrl: "", // 菜单url
                    roleUrl: "", // 权限地址
                    menuIcon: "", // 菜单图标
                    type: "menu", // 权限类型 'menu' : 菜单  'button' ：按钮
                    parentId: '', // 父菜单id
                }, // 菜单信息
                ruleMenuInfoFrom: {
                    menuName: [{required: true, message: '请填写菜单名称', trigger: 'change'}]
                }, // 校验表单
                menuInfList: [], // 菜单列表
                menuDirInfList: [], // 菜单列表
                totalSize: 0, // 总行数
                dialogVisible: false,// 新增/编辑弹窗是否显示
                dialogTitle: '新增菜单', // 弹窗标题
                dialogType: '', // 弹窗操作类型
                roleTypeList: [
                    {name: '目录', code: 'dir'},
                    {name: '菜单', code: 'menu'},
                    {name: '按钮', code: 'button'},
                ],
            };
        },
        created() {
            this.getMenuList();
            // this.initMenuList();
        },
        methods: {
            initMenuList() {
                let menuList = [];
                for (var i = 1; i <= 5; i++) {
                    let menuInfo = {
                        menuId: i,
                        menuName: '测试' + i,
                        menuUrl: '/menu/menuList' + i,
                        roleUrl: '/menu/menuList' + i,
                        menuIcon: '',
                        type: (i % 2 == 0) ? 'menu' : 'button',
                    }
                    let menuDir = {
                        menuId: i,
                        menuName: '系统管理' + i,
                        menuUrl: '',
                        roleUrl: '',
                        menuIcon: '',
                        type: '',
                    }
                    menuList.push(menuInfo)
                    this.menuDirInfList.push(menuDir);
                }
                this.menuInfList = menuList;
                // 总行数
                this.totalSize = 5;
                // 当前页
                this.queryParams.pageNum = 1;
                // 每页行数
                this.queryParams.pageSize = 10;
            },
            getMenuList() {
                getAllMenuList(this.queryParams)
                    .then(res => {
                        console.log("菜单列表", res);
                        if (res.result == "success") {
                            this.menuInfList = res.data;
                            res.data.forEach(item => {
                                if (item.parentId == 0) {
                                    this.menuDirInfList.push({menuId: item.menuId, menuName: item.menuName})
                                }
                            })
                            // 总行数
                            this.totalSize = res.totalRows;
                            // 当前页
                            this.queryParams.pageNum = res.pageNum;
                            // 每页行数
                            this.queryParams.pageSize = res.pageSize;
                        } else {
                            this.$notify({
                                type: "error",
                                message: res.message
                            });
                        }
                    })
                    .catch(err => {
                        console.log("查询菜单信息出错", err);
                    });
            },
            // 编辑用户信息初始化
            handleEdit(row, type) {
                if (type == 'edit') {
                    if (row.parentId == 0) {
                        this.menuInfoFrom = {
                            ...row,
                        }
                    }
                    this.dialogTitle = '编辑菜单';
                    this.dialogType = 'edit';
                } else {
                    this.dialogTitle = '新增菜单';
                    this.dialogType = 'insert';
                }

                this.dialogVisible = true;
            },
            // 关闭编辑/新增弹窗
            closeEdit() {
                this.dialogVisible = false;
                this.$refs['menuInfoFrom'].resetFields();
            },
            // 编辑菜单信息提交
            handleEditSubmit() {
                this.$refs['menuInfoFrom'].validate((valid) => {
                    if (valid) {
                        if (this.dialogType == 'edit') {
                            updateMenu(this.menuInfoFrom).then(res => {
                                if (res.result == 'success') {
                                    this.$notify({type: 'success', message: '修改成功'});
                                    this.dialogVisible = false;
                                    this.getMenuList();
                                } else {
                                    this.$notify({type: 'error', message: res.message});
                                }
                            })
                        } else {
                            insertMenu(this.menuInfoFrom).then(res => {
                                if (res.result == 'success') {
                                    this.$notify({type: 'success', message: '添加成功'});
                                    this.dialogVisible = false;
                                    this.getMenuList();
                                } else {
                                    this.$notify({type: 'error', message: res.message});
                                }
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 删除菜单信息
            handleDelete(row) {
                this.$confirm("请确认是否删除菜单信息?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    deleteMenu({menuId: row.menuId}).then(res => {
                        if (res.result == 'success') {
                            this.$notify({type: 'success', message: '删除成功'})
                            this.getMenuList();
                        } else {
                            this.$notify({type: 'error', message: res.message})
                        }
                    })
                }).catch(() => {
                });
            }
        }
    };
</script>

<style scoped>
</style>